<template>
    <div id="image-item">
        <div class="image-box">
            <img src="https://img.xiaopiu.com/userImages/img27159694677d8.jpg" alt="">
        </div>
        <div class="garden" @click="">
            √
            </div>
        <div class="text">
            优美的风景
        </div>

    </div>
</template>

<script>
    export default {
        name: "ImageItem"
    }
</script>

<style lang="less">
    #image-item {
        margin-left: 25px;
        margin-right: 25px;

        .image-box {
            img {
                width: 160px;
                height: 140px;
            }

        }
        .garden {
            border-radius: 50%; //圆角百分比
            width: 30px;
            height: 30px;
            border: 1px #999999 solid;
            position: relative;
            top: -140px;
            left: 120px;
            font-size: 25px;
            text-align: center;
            color: #999;
        }

        .text {
            color: rgba(80, 80, 80, 1);
            font-size: 14px;
            line-height: 150%;
            text-align: center;
        }

    }
</style>
